
let Vue

class VueRouter{
    constructor(options){
        /*
             routes: [
                    {
                    path: '/',
                    name: 'HelloWorld',
                    component: HelloWorld
                    },
                    {
                    path: '/about',
                    name: 'about',
                    component: about
                    }
              ]
        */
    //  console.log(options)
    //  this.current="/" //当前路由
    let initPath="/" //当前路由
     //this 就是 VueRouter 这个对象
     Vue.util.defineReactive(this,'current',initPath)   //实现响应式 current


     this.routes=options.routes  //用户路由规则
     this.mode=options.mode || 'hash'
     this.init() // 监听路由的改变

    }
    init(){
        if(this.mode=='hash'){
          
            window.addEventListener('load',()=>{
                console.log('loadloadloadloadload')
                console.log(location.hash)
                console.log('loadloadloadloadload')
                this.current=location.hash.slice(1)
            })

            window.addEventListener('hashchange',()=>{
                console.log('hashchange hashchange hashchange')
                console.log(location)
                console.log(location.hash)
                console.log('hashchange hashchange hashchange')
                this.current=location.hash.slice(1)
            })


        }
    }

}

VueRouter.install=function(vue){
    Vue=vue
     //给调用的组件添加一个router
     Vue.mixin({
        beforeCreate(){
            //console.log(this.$options)
            if(this.$options.router){
               //根 root
                Vue.prototype.$router=this.$options.router // this.$router 所以我们才能这麽样
            }else{
            }

        }
   })
    //创建全局组件 router-link
    //router-link 有点像a标签
    Vue.component('router-link',{
        props:{
            to:{
                type:String,
                require:true,
            }
        },
        render(h){
            return h('a',{attrs:{
                href:"#"+this.to
            }},this.$slots.default)
        }

    })
    //这个也是全局组件 router-view  占位符  相当于一个div
    Vue.component('router-view',{
        render(h){
            //render函数的数据必须是响应式的 必须把currnet变成响应式
          //  console.log(this.$router)
            //路由地址+
            let currnet=this.$router.current //当前路由
            let routes=this.$router.routes
            
            let com=routes.find((item)=>{
               return  currnet==item.path
            })
            // console.log('///')
            // console.log(currnet)
            // console.log(routes)
            // console.log(com)
            // console.log('///')
            return h(com.component)

            // return h('div','router-view')
        }

    })



}


export default VueRouter